<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Test</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap-4.6.0/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="lib/editormd/css/editormd.min.css" >

    <link rel="stylesheet" href="lib/semantic.min.css">
    <link rel="stylesheet" href="lib/animate.css">

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <style>

    </style>

</head>
<body>
<h1>你好，世界！</h1>
bootStrap测试
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<h1 class="animate__animated animate__bounce">An animated element</h1>
JQ测试
<input type="text" id="jq"><br/>
Vue测试
<div id="app">
    <input type="text" id="vv" :value="message"><br/>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user/a" tag="h1">to user a</router-link>
        <router-link to="/user/b" tag="h1">to user b</router-link>
        <router-link to="/admin" tag="h1">admin</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->

    <transition
            enter-active-class="animate__animated animate__zoomInUp"
            leave-active-class="animate__animated animate__zoomOutUp"
            >
        <router-view></router-view>
    </transition>

</div>

<form  method="post" action="/file/uploads" enctype="multipart/form-data" >
    <input type="file" name="file">
    <input type="file" name="files" multiple>
    <input type="submit" value="上传">
</form>

editormd测试
<form action="/blog" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="hidden" name="_method" value="PUT">
    <input type="text" name="textcontent">
    <div class="required field">
        <div class="" id="md-content" >
            <textarea placeholder="博客内容" name="content" style="display: none" ></textarea>
        </div>
        <input type="submit" value="提交">
    </div>
</form>
    <img src="file://T:/Java/upload/contentPicture/aaaaaa.png">



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="lib/jquery-3.5.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/bootstrap-4.6.0/js/bootstrap.min.js"></script>
<script src="lib/semantic.min.js"></script>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script src="lib/editormd/editormd.min.js" ></script>

<script>
    /*semantic的动画是.transaction而非class*/
    // $("#jq").transition();

    $("#jq").addClass("animate__animated animate__bounceOut");



    //定制Vue路由器
    const user = {
        template: '<div ><h1>user : {{ $route.params.id }}</h1></div>'
    }
    const admin = {
        template: '<div ><h1>admin</h1></div>'
    }
    const routes = [
        { path: '/user/:id', component: user },
        { path: '/admin', component: admin }
    ]
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })
    //创建Vue
    const vue = new Vue(
        {
            router,
            el: "#app",
            data: {
                message: "hello Vue!",

            }

        }
    );


</script>

<script>
    //初始化Markdown编辑器
    var contentEditor;
    $(function() {
        contentEditor = editormd("md-content", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "lib/editormd/lib/",
            emoji: true,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/contentPicture",
        });
    });


</script>
</body>
</html>